<template>
	<div class="modal-mask" :style="{display: (props.visible ? 'block': 'none')}">
		<div class="modal" :style="{width}">
			<div class="modal-title">提示</div>
			<div class="modal-body">
				<slot></slot>
			</div>
			<div class="modal-footer">
				<slot name="footer"></slot>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {watch, onMounted} from 'vue'
	const props = defineProps({
		visible: Boolean,
		width: {
			type: String,
			default: '500px'
		}
	})
	
	watch(() => props.visible, (newVal, oldVal)=> {
		console.log(newVal, oldVal)
		if(newVal){
			document.getElementById('mask').style.display = 'block'
		}else{
			document.getElementById('mask').style.display = 'none'
		}
	})
	
	onMounted(() => {
		const div = document.createElement('div')
		div.style.backgroundColor = '#333'
		div.style.width = '100%'
		div.style.height = '100vh'
		div.style.position = 'fixed'
		div.style.left = '0'
		div.style.top = '0'
		div.style.opacity = '0.5'
		div.style.display = 'none'
		div.style.zIndex = 2001
		div.setAttribute('id', 'mask')
		document.getElementsByTagName('body')[0].appendChild(div)
	})

	console.log(props.visible)
</script>

<style scoped>
		
	.modal-mask{
		z-index: 2002;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		overflow: auto;
	}
	.modal {
		background: #FFF;
		position: relative;
		left: 50%;
		top: 10vh;
		transform: translate(-50%)
	}
	.modal-title {
		width: 100%;
		height: 40px;
		background: #EEE;
		line-height: 40px;
	}
	.modal-body{
		min-height: 200px;
	}
	.modal-footer{
		height: 60px;
		text-align: center;
	}
</style>